<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云日历登录</title>

    <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="login.css">
    <script src="login.js"></script>
    <script src="../../lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="../../lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="header-block flex-column">
        <div class="logo-block flex-column">
            <a class="logo-a" href="/">个人云日历</a>
        </div>
    </div>

    <div class="login-block flex-row">
        <div class="login-container-bg">
            <div class="login-container">
                <div class="login-container-header">
                    Login in
                </div>
                <div class="login-container-content flex-row">
                    <div class="login-container-content-block">
                        <div class="login-input-item">
                            <div class="login-input-item-title">username</div>
                            <div class="login-input-block">
                                <input class="login-input">
                            </div>
                        </div>
                        <div class="login-input-item">
                            <div class="login-input-item-title">password</div>
                            <div class="login-input-block">
                                <input class="login-input">
                            </div>
                        </div>
                        <div class="login-radio">
                            <input type="radio"> keep login in
                        </div>
                        <div class="submit-block flex-row">
                            <button class="submit-btn">Login in</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="line">
        </div>

        <div class="simple-info-block">
            <div class="simple-info-title">
                合理的利用您的时间
            </div>

            <div class="simple-info-desc">
                您可以通过云日历获得以下或更多的便利
            </div>

            <div class="icon-block">
                <div class="icon-container">
                    <div class="icon-div"><span class="glyphicon glyphicon-edit"></span></div>
                    <div class="icon-desc">便利的编辑</div>
                </div>

                <div class="icon-container">
                    <div class="icon-div"><span class="glyphicon glyphicon-equalizer"></span></div>
                    <div class="icon-desc">丰富的统计</div>
                </div>

                <div class="icon-container">
                    <div class="icon-div"><span class="glyphicon glyphicon-cog"></span></div>
                    <div class="icon-desc">个性化配置</div>
                </div>

                <div class="icon-container">
                    <div class="icon-div"><span class="glyphicon glyphicon-tasks"></span></div>
                    <div class="icon-desc">多样的服务</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>